<template>
    <div class="w750">
        <div class="d-flex flex-column h-100">
            <van-tabs class="bg-fff" @change="changeTab" v-model="params.mode":color="themes.color" :title-active-color="themes.color">
                <van-tab title="全部" name="" />
                <van-tab title="消费" name="EXPENDITURE" />
                <van-tab title="退款" name="INCOME" />
            </van-tabs>
            <div class="flex-1 bg-fff">
                <van-list
                    v-if="paging.tab"
                    v-model="paging.loading"
                    :finished="paging.finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="loadMore"
                >
                    <div @click="toDetail(item)" v-for="item in list" :key="item.id" class="p-2 d-flex font-14 border-bottom">
						<div>
						    <!-- <legend-image :pic="''"  /> -->
						    <img
						        v-if="item.tradeType == 'PAYMENT_GOODS'"
						        src="@/assets/images/goods.png"
						        alt=""
						        style="width: 50px; height: 50px"
						        class="rounded-circle"
						    />
						    <img
						        v-else-if="item.tradeType == 'REFUND'"
						        src="@/assets/images/refund.png"
						        alt=""
						        style="width: 50px; height: 50px"
						        class="rounded-circle"
						    />
						    <img
						        v-else-if="item.tradeType == 'RECHARGE'"
						        src="@/assets/images/recharge.png"
						        alt=""
						        style="width: 50px; height: 50px"
						        class="rounded-circle"
						    />
						    <img
						        v-else-if="item.tradeType == 'WITHDRAW'"
						        src="@/assets/images/withdraw.png"
						        alt=""
						        style="width: 50px; height: 50px"
						        class="rounded-circle"
						    />
						    <img v-else src="@/assets/images/recharge.png" alt="" style="width: 50px; height: 50px" class="rounded-circle" />
						</div>
                        <div class="d-flex flex-column j-sa ml-1 flex-1">
                            <span>{{ item.tradeType | getTradeType }}</span>
                            <span class="font-12 text-999">{{ item.paymentTime | dateformat }}</span>
                        </div>
                        <div
                            class="a-self-center font-16 font-weight"
                            :class="[item.mode == 'INCOME' ? 'text-primary' : 'text-danger']"
                        >
                            {{ item.mode == 'INCOME' ? '+' : '-' }}￥{{ money(item.totalAmount)[0] }}.{{ money(item.totalAmount)[1] }}
                        </div>
                    </div>
                </van-list>
                <noempty v-if="paging.emptylist || paging.error" :pic="require('@/assets/images/review.png')" title="暂无数据" />
            </div>
        </div>
    </div>
</template>

<script>
import legendImage from '@/components/legendImage/legendImage'
import Noempty from '@/components/Noempty/Noempty'
import { predepositBalanceDetailList } from '@/api/balance'
import { mapState } from 'vuex'
import PageUtil from 'utils/PageUtil'
import cash from 'utils/tool'

const pageUtil = new PageUtil(predepositBalanceDetailList)

export default {
    name: 'extensionUsageRecord',
    components: { legendImage, Noempty },
    data() {
        return {
            active: 0,
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            params: {
                mode: '',
				accountType: 'USER_EARNINGS_BALANCE' //（收益支付） 
            },
            money: cash
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    filters: {
        getTradeType(type) {
            const dict = {
                RECHARGE: '充值',
                WITHDRAW: '提现',
                REFUND: '退款',
                PAYMENT_GOODS: '购物消费',
                MANUAL_CONTROL_BALANCE: '商家调整'
            }
            return dict[type]
        }
    },
    created() {},
    destroyed() {},
    mounted() {
        pageUtil.loadListByPage(this, this.params)
    },
    methods: {
        loadMore() {
            pageUtil.loadListByPageMore(this.params)
        },

        // 去详情页面
        toDetail(item) {
            this.$router.push({
                path: '/myExtension/usageRecordDetail',
                query: {
                    id: item.id
                }
            })
        },

        // 切换tab
        changeTab(name) {
            this.$set(this.params, 'mode', name)
            this.$set(this.params, 'curPageNO', 1)
            pageUtil.loadListByPage(this, this.params)
        }
    }
}
</script>

<style scoped></style>
